<script setup>
    import * as echarts from "echarts"
    import { onMounted } from 'vue'

    const props = defineProps({
        regionData: {
            type: Array,
            default: []
        }
    })

    let data = $ref([])

    props.regionData.map(item => {
        data.push({
            name: item.name,
            value: item.numb
        })
    })

    console.log(data)

    let eCharts = null
    let regionPie = $ref(null)

    onMounted(() => {
        init()
    })

    const init = () => {
        let option = {
            color: ['#2BF0FB', '#00B366', '#EFAE00', '#B3EA49'],
            // legend: {
            //     bottom: '3%',
            //     itemWidth: 15,
            //     textStyle: {
            //         backgroundColor: 'transparent',
            //         color: '#fff',
            //         width: 50,
            //         fontSize: 16
            //     }
            // },
            series: [
                {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: [40, 80],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    label: {
                        normal: {
                            show: true,
                            color: '#fff',
                            fontSize: 15,
                            formatter: '{b}：{d}%'
                        }
                    },
                    data: data
                }
            ]
        }

        eCharts = echarts.init(regionPie)
        eCharts.setOption(option)

    }
</script>

<template>
    <div class="region-pie" ref="regionPie"></div>
</template>

<style lang="less" scoped>
    .region-pie{
        width: 400px;
        height: 204px;
    }
</style>